<template>
  <!--  -->
  <!-- 文件预览：图片预览 -->
  <!--  -->
  
  <div class="imaeg-riewer"></div>
  <!-- :initial-index:初始化的索引（第一张图） :url-list:图片链接列表  hide-on-click-modal:点击空白处关闭图片  @close:右上角X图标点击事件 -->
  <el-image-viewer 
    :initial-index="previewImgIndex" 
    :url-list="imageList" 
    hide-on-click-modal
    @close="closeImgViewer"
    v-if="previewImgIndex != null"></el-image-viewer>

</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch } from "vue";

//父组件Preview.vue传递的图片路径
const props = defineProps({
    imageList: {
        type: Array,
    },
});


//由Preview.vue的showPreview方法调用
const previewImgIndex = ref(null);  //初始化的索引（第一张图）
const show = (index) => {
    //stopScroll();                   //隐藏滚动条
    previewImgIndex.value = index;
};
defineExpose({ show });             //对外暴露


//点击空白处关闭图片
const closeImgViewer = () => {
    //startScroll();                  //显示滚动条
    previewImgIndex.value = null;   //置为空，关闭图片
};


//隐藏滚动条
const stopScroll = () => {
    document.body.style.overflow = "hidden";    //隐藏滚动条
};


//显示滚动条
const startScroll = () => {
    document.body.style.overflow = "auto";      //显示滚动条
}

</script>

<style>

</style>